<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>创作中心</title>

    <!--editor.md-->
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"/>

    <!-- Bootstrap -->
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
</head>
<body style="background-color: #f8f8f8;">

<div th:replace="~{commons::navbar('write')}"></div>


<div class="container">
    <div style="background-color: white">
        <div th:replace="~{commons::usermanage('add')}" class="row">
            <ul class="nav nav-tabs">
                <li role="presentation"><a href="#">管理博客</a></li>
                <li class="active" role="presentation"><a href="#">添加博客</a></li>
                <li role="presentation"><a href="#">管理标签</a></li>
                <li role="presentation"><a href="#">我的收藏</a></li>
                <li role="presentation"><a href="#">我的点赞</a></li>
                <li role="presentation"><a href="#">我的资料</a></li>
            </ul>
        </div>
        <div class="row">
            <main role="main" class="col-xs-12" style="padding: 10px 10px 10px 10px;">
                <div style="background: white;border-radius: 5px;box-shadow: 0 1px 3px rgba(18,18,18,.1);padding: 0px 10px 10px 10px">
                    <h3 style="margin-left: 20px" th:text="${article==null?'添加博客':'编辑博客'}">编辑博客</h3>
                    <a th:href="@{/user/addArticle}"
                       style="background-color: white;border: #0084ff solid 1px;color: #0084ff" type="button"
                       class="btn">大屏幕编辑点我</a>
                    <form class="form-horizontal" th:action="@{/user/addArticle}" method="post"
                          enctype="multipart/form-data">
                        <div class="form-group" style="margin-top: 10px">
                            <label for="inputEmail3" class="col-sm-2 control-label">文章标题</label>
                            <div class="col-sm-6">
                                <input name="title" th:value="${article==null?'':article.getTitle()}"
                                       class="form-control" id="inputEmail3" placeholder="请输入标题...">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="exampleInputFile" class="col-sm-2 control-label">封面图片</label>
                            <div class="col-sm-6">
                                <input type="file" name="file" id="exampleInputFile">
                            </div>

                        </div>
                        <span>选择标签:</span>
                        <div class="checkbox">
                            <label th:each="tag:${tags}" class="col-sm-2 control-label">
                                <input th:checked="${oldTags.contains(tag.getId())?'true':'false'}" type="checkbox"
                                       th:value="${tag.getId()}">
                                <span th:text="${tag.getName()}"></span>
                            </label>
                        </div>
                        <div class="row">
                            <div id="layout">

                                <div id="test-editormd">
<textarea name="content" th:text="${article==null?'':article.getContent()}">

</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row text-right" style="margin-right: 1em">
                            <input type="submit" class="btn btn-success" style="width: 5em">
                        </div>
                    </form>
                </div>
            </main>
        </div>
    </div>
</div>

</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script th:src="@{/js/bootstrap.js}"></script>
<script th:src="@{/editormd/editormd.min.js}"></script>
<script type="text/javascript">
    var testEditor;

    $(function () {
        testEditor = editormd("test-editormd", {
            width: "90%",
            height: 600,
            syncScrolling: "single",
            //图片上传
            watch: false,
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/user/upload",
            onload: function () {
                console.log('onload', this);
            },
            path: "/editormd/lib/"
        });
    });
</script>


</body>
</html>